<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabs Tools - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tabs Tools</h2>
<div class="demo-info">
    <div class="demo-tip icon-tip"></div>
    <div>Click the buttons on the top right of tabs header to add or remove tab panel.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'"
       onclick="addPanel()"></a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'"
       onclick="removePanel()"></a>
</div>
<script type="text/javascript">
    var index = 0;
    function addPanel() {
        index++;
        $('#tt').tabs('add', {
            title: 'Tab' + index,
            content: '<div style="padding:10px">Content' + index + '</div>',
            closable: true
        });
    }
    function removePanel() {
        var tab = $('#tt').tabs('getSelected');
        if (tab) {
            var index = $('#tt').tabs('getTabIndex', tab);
            $('#tt').tabs('close', index);
        }
    }
</script>
</body>
</html>